<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			#chart1 {
				width: 100%;
				height: 600px;
				min-height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="chart1"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						city: []
					};
				},
				created() {
					this.getData();
				},
				methods: {
					getData() {
						axios.get('https://www.huodongjia.com/base_menu/')
							.then(res => {
								console.log('请求成功', res.data);
								if (res.data?.city && Array.isArray(res.data.city)) {
									this.city = res.data.city.slice(1); // 跳过第一项
									this.chart1();
								}
							})
							.catch(err => {
								//请求失败
								console.log('请求失败' + err)
							})
							.finally(() => {
								console.log('请求完成')
							})
					},
					chart1() {
						if (!this.city.length) return;
						const displayData = this.city.slice(0, 30);
						const xdata = displayData.map(item => item.district_name || item.name);
						const ydata = displayData.map(item => parseInt(item.district_id || item.value));
						const myChart = echarts.init(document.getElementById('chart1'), 'dark');
						myChart.setOption({
							backgroundColor: '#06164A',
							title: {
								text: '城市数据',
								left: 'center'
							},
							tooltip: {
								trigger: 'axis'
							},
							grid: {
								bottom: '20%'
							},
							xAxis: {
								type: 'category',
								data: xdata,
								axisLabel: {
									rotate: 45,
									interval: 0,
									fontSize: 10
								}
							},
							yAxis: {
								type: 'value'
							},
							dataZoom: [
								{
									type: 'slider',
									show: true,
									xAxisIndex: [0],
									start: 0,
									end: 40
								}
							],
							series: [{
								data: ydata,
								type: 'bar',
								itemStyle: {
									borderRadius: 8
								},
								label: {
									show: true,
									position: 'top',
									fontSize: 10
								}
							}]
						});
						window.addEventListener('resize', myChart.resize);
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>